<template>
  <div class="app-container">
    <el-tabs type="border-card" style="width: 700px">
      <el-tab-pane label="个人信息">
        <el-form ref="dataForm1" :rules="rules" :model="temp" label-width="120px" style="width: 70%; margin-left:50px;">
          <el-form-item label="账户名" prop="adminUsername">
            <el-input v-model="temp.adminUsername" disabled />
          </el-form-item>
          <el-form-item label="昵称" prop="adminName">
            <el-input v-model="temp.adminName" />
          </el-form-item>
          <el-form-item label="真实姓名" prop="realName">
            <el-input v-model="temp.realName" />
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="temp.phone" />
          </el-form-item>
          <el-button type="primary" style="margin-left: 120px" @click="updateData()">确认修改</el-button>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="重设密码">
        <el-form ref="dataForm2" :rules="rules" :model="temp" label-width="120px" style="width: 70%; margin-left:50px;">
          <el-form-item label="旧密码" prop="opwd">
            <el-input v-model="temp.opwd" show-password />
          </el-form-item>
          <el-form-item label="新密码" prop="adminPassword">
            <el-input v-model="temp.adminPassword" show-password />
          </el-form-item>
          <el-form-item label="确认新密码" prop="repeatPassword">
            <el-input v-model="temp.repeatPassword" show-password />
          </el-form-item>
          <el-button type="primary" style="margin-left: 120px" @click="changePwd()">确认重设</el-button>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getInfo } from '@/api/user'
import { editAdminUser, changePwdSelf } from '@/api/admin'
import waves from '@/directive/waves'
import { validUsername, isPassword } from '@/utils/validate'
import rsaEncrypt from '@/utils/rsa'

export default {
  name: 'CompanyInfo',
  directives: { waves },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('请输入正确的账号！'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不得少于6位！'))
      } else {
        callback()
      }
    }
    const validateRepeat = (rule, value, callback) => {
      if (value !== this.temp.adminPassword) {
        callback(new Error('两次输入的密码不一致！'))
      } else {
        callback()
      }
    }
    return {
      formLoading: true,
      temp: {
        adminId: undefined,
        adminUsername: '',
        adminPassword: '',
        repeatPassword: '',
        adminType: '',
        adminName: '',
        realName: '',
        phone: '',
        opwd: ''
      },
      rules: {
        adminUsername: [{ required: true, message: '请输入正确的账号', trigger: 'blur', validator: validateUsername }],
        adminPassword: [{ required: true, message: '密码不得少于6位', trigger: 'blur', validator: validatePassword }, { validator: isPassword, trigger: 'blur' }],
        repeatPassword: [{ required: true, trigger: 'blur', validator: validateRepeat }],
        adminType: [{ required: true, message: '请选择管理员权限类型', trigger: 'change' }],
        adminName: [{ required: true, message: '请填写管理员昵称', trigger: 'blur' }],
        opwd: [{ required: true, message: '密码不得少于6位', trigger: 'blur', validator: validatePassword }, { validator: isPassword, trigger: 'blur' }]
      }
    }
  },
  created() {
    this.initForm()
  },
  methods: {
    initForm() {
      this.temp.opwd = ''
      this.formLoading = true
      getInfo().then(response => {
        this.temp.opwd = ''
        this.temp.adminId = response.data.adminId
        this.temp.adminUsername = response.data.adminUsername
        this.temp.adminPassword = ''
        this.temp.repeatPassword = ''
        this.temp.adminType = response.data.adminType
        this.temp.adminName = response.data.adminName
        this.temp.realName = response.data.realName
        this.temp.phone = response.data.phone
        this.formLoading = false
      })
    },
    updateData() {
      this.$refs['dataForm1'].validate((valid) => {
        if (valid) {
          editAdminUser(this.temp).then(() => {
            this.$notify({
              title: 'Success',
              message: '编辑账号信息成功',
              type: 'success',
              duration: 2000
            })
            this.$store.dispatch('user/getInfo')
          })
        }
      })
    },
    changePwd() {
      this.$refs['dataForm2'].validate((valid) => {
        if (valid) {
          const opwdEncrypt = rsaEncrypt(this.temp.opwd)
          const passwordEncrypt = rsaEncrypt(this.temp.adminPassword)
          const data = Object.assign({}, this.temp)
          data.adminPassword = passwordEncrypt
          data.adminName = opwdEncrypt
          changePwdSelf(data).then(response => {
            if (response.code === 0) {
              this.logout()
              this.$notify({
                title: 'Success',
                message: '修改密码成功，请重新登录',
                type: 'success',
                duration: 3000
              })
            }
          })
        }
      })
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login`)
    }
  }
}
</script>
